import React, { Component } from "react";

import { NavBar, Icon, List } from "antd-mobile";
import axios from "axios";
import "./messagebox.css";
import store from "../../../store";
const Item = List.Item;
const Brief = Item.Brief;
class messageBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    };
  }
  componentDidMount() {
    axios
      .get("http://localhost:4000/comment/music?id=186016&limit=1")
      .then((res) => {
        this.setState({
          list: res.data.hotComments,
        });
      });

    // 设置底部样式
    store.dispatch({
      type: "footer_hidden",
      hidden: true,
    });
    // console.log(axios)
  }
  componentWillUnmount() {
    this.setState = () => {}; //直接将setState重写，核心
  }
  render() {
    return (
      <div>
        <div
          className="header"
          style={{ position: "fixed", zIndex: "100", width: "100%", top: 0 }}
        >
          <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => {
              window.history.back(-1);
              store.dispatch({
                type: "footer_hidden",
                hidden: false,
              });
            }}
          >
            消息盒子
          </NavBar>
        </div>

        <div style={{ marginTop: "45px", marginBottom: "45px" }}>
          {this.state.list.map((item, index) => {
            return (
              <Item
                key={item.commentId}
                arrow="horizontal"
                thumb={item.user.avatarUrl}
                onClick={() => {}}
              >
                {item.user.nickname} <Brief>{item.content}</Brief>
              </Item>
            );
          })}
        </div>
      </div>
    );
  }
}

export default messageBox;
